<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 选择一个 -->
    <select name="abc" id="" v-model="fruit">
      <option value="apple">Apple</option>
      <option value="Banana">Banana</option>
      <option value="Peach">Peach</option>
      <option value="Potato">Potato</option>
    </select>
    <h2>Your fruit:{{fruit}}</h2>
  
  <!-- 选择多个 -->
  <select name="abc" v-model="fruits" multiple>
    <option value="apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Peach">Peach</option>
    <option value="Potato">Potato</option>
  </select>
  <h2>Your fruits:{{fruits}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruit: 'Banana',
        fruits:[]
      }
    })
  </script>
</body>

</html>